<template>
    <div class="took_order_list">
        <top-timer :back="false"/>
        <p class="font_M col_333 font_40 title center">箱门已关闭，取回衣物如下</p>
        <p class="col_999 font_28 center">如有衣物遗漏未取，可重新开箱取回衣物</p>
        <div class="scroll_box">
            <div class="order_card " v-for="list in deliveryList" v-if="list.orderStatus==='02' || list.orderStatus==='10' ">
                <div class="order_info overflow col_999 font_30">
                    <span class="fl">订单：{{list.orderCode}}</span>
                    <span class="fl">{{list.orderStatusName}}</span>
                    <span class="fr">配送流水：{{list.sendCode}}</span>
                </div>
                <div class="list_haed font_30 col_666 center">
                    <span class="w20">箱隔号</span>
                    <span class="w20">衣物</span>
                    <span class="w20">数量</span>
                    <span class="w10">状态</span>
                    <span class="w30">操作</span>
                </div>
                <div class="row" v-for="item in list.deliveries">
                    <span class="w20">{{item.boxCode}}</span>
                    <span class="w20 txt_overflow">{{item.goodsName }}</span>
                    <span class="w20">{{item.deliveryNum}}</span>
                    <span class="w10">{{item.takeStatusName}}</span>
                    <span class="w30 canOpen" @click="openAgain(item, list.sendCode)">
                        <span v-if="canReOpen(item)">重新开箱</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="btn_box">
            <el-button type="primary" class="col_fff font_M font_40" @click="finish()">取衣完成</el-button>
        </div>
        <top-tips/>
    </div>
</template>

<script>
  export default {
    name: 'took-order-list',
    data () {
      return {
        deliveryList: []
      }
    },
    created () {
      // this.selectDeliveryByUserIdAndCabinetId()
      this.getPickupInfoByBoxCode()
    },
    methods: {
      // 获取用户可取订单衣物
      // selectDeliveryByUserIdAndCabinetId(){
      //   this.$axios.get('pickupClothesRest/getPickupInfoByBoxCode',{
      //     params:{
      //       cabinetId:localStorage.getItem('cabinetId')
      //     }
      //   }).then(res => {
      //     this.deliveryList = res.data
      //   })
      // },
      getPickupInfoByBoxCode () {
        let params = JSON.parse(this.$route.query.arr)
        this.boxCodes = params.map(a => a.boxCode)
        this.$axios.post('pickupClothesRest/getPickupInfoByBoxCode', params,this.$global.HEADER_JSON)
        .then(res => {
          this.deliveryList = res.data
        })
      },
      canReOpen (item) {
        //打开过的箱子
        let params = JSON.parse(this.$route.query.arr)
        let boxCodes = params.map(a => a.boxCode)
        return boxCodes.indexOf(item.boxCode) >= 0
      },
      openAgain (item, sendCode) {
        this.$axios.post('pickupClothesRest/openBoxByRePickup', {
          boxCode: item.boxCode,
          cabinetId: localStorage.getItem('cabinetId')
        }).then(res => {
          if (res.data.result) {
            let boxCodes = []
            boxCodes.push(item.boxCode)
            let success = () => {
              this.$router.push({path: 'TakeOpenCupboard', query: {arr: this.$route.query.arr, sendCode: sendCode, boxCode: JSON.stringify(boxCodes), type: 'again'}})
            }
            let error = () => {
              this.$alert("开箱失败，请联系客服，联系方式见屏幕下方！");
            }
            let boxMac = this.$boxConfig[item.boxCode]
            window.cordova.plugins.CabinetPlugin.sendOpenBoxCommand(boxMac, success, error)
          } else {
            this.$alert(res.data.msg, '开箱错误')
          }
        })
      },
      finish () {
        let arr = []
        for (let d of this.deliveryList) {
          if (this.canReOpen(d)) {
            arr.push({
              orderCode: d.orderCode,
              sendCode: d.sendCode
            })
          }
        }
        this.$router.push({path: 'TookSuccess', query: {arr: JSON.stringify(arr)}})
      }
    }
  }
</script>

<style lang="scss">
    .took_order_list {
        .title {
            margin: 0.40rem 0 0.20rem;
        }
        .w10 {
            width: 10%;
        }
        .w20 {
            width: 20%;
        }
        .w30 {
            width: 30%;
        }
        .w40 {
            width: 40%;
        }
        .scroll_box {
            padding-top: 0.2rem;
            margin-top: 0.20rem;
            overflow-y: scroll;
            height: 5.8rem;
            margin-bottom: 0.9rem;
        }
        .order_card {
            margin-bottom: 0.4rem;
            padding: 0 0.80rem;
            span {
                vertical-align: middle;
                display: inline-block;
            }
            .order_info {
                margin-bottom: 0.20rem;
                .fl {
                    margin-right: 0.40rem;
                }
            }
            .list_haed {
                padding: 0.20rem 0;
                background: rgba(236, 245, 252, 1);
                border-radius: 0.08rem 0.08rem 0rem 0rem;
            }
            .row {
                color: #666666;
                font-size: 0.28rem;
                text-align: center;
                padding: 0.20rem 0;
                border-bottom: 0.02rem solid #CAE5FD;
                .open {
                    color: #999999;
                }
                .canOpen {
                    color: #0A82EC;
                }
            }
        }
        button {
            width: 2.4rem;
            height: 0.80rem;
            font-size: 0.40rem;
            border-radius: 0.70rem;
            background-color: #0A82EC;
            display: block;
            margin: auto;
            padding: 0;
        }
    }
</style>
